<template>
  <div>
    <!-- 头部 -->
    <a-form
      ref="formRef"
      :rules="rules"
      :model="form"
      :hideRequiredMark="true"
      style="margin-bottom: 20px"
    >
      <a-row>
        <a-col :span="8">
          <a-form-item name="portValue">
            <a-select
              ref="select"
              v-model:value="form.portValue"
              style="width: 200px"
              @focus="focus"
              @change="handleChange"
              placeholder="请选择端口"
            >
              <a-select-option
                v-for="item in ports"
                :value="item.name"
                :key="item.id"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item name="inputValue">
            <a-input
              v-model:value="form.inputValue"
              placeholder="请输入搜索内容"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1">
          <a-button type="primary" @click="search">搜索</a-button></a-col
        >
      </a-row>
    </a-form>

    <!-- 列表 -->
    <a-table
      :columns="columns"
      :row-selection="rowSelection"
      :data-source="dataSource"
      bordered
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #title
        ><a-button type="primary" @click="add" v-has="{ a: $route, b: 2 }"
          >新增</a-button
        ></template
      >
      <template #operation="{ record }">
        <a-button
          type="link"
          danger
          @click="del(record.key)"
          v-has="{ a: $route, b: 2 }"
          >删除</a-button
        >
      </template>
    </a-table>
    <!-- 多项删除 -->
    <a-button type="danger" @click="listDel" v-has="{ a: $route, b: 2 }"
      >删除</a-button
    >

    <!-- 弹窗 -->
    <a-modal
      v-if="visible"
      :visible="visible"
      title="新增分类"
      okText="保存"
      @ok="save"
      @cancel="cancel"
      :destroyOnClose="true"
    >
      <a-input
        placeholder="请输入分类名称"
        v-model:value="title"
        @pressEnter="save"
      ></a-input>
    </a-modal>
  </div>
</template>
<script>
import { reactive, ref, computed, createVNode, watch } from "vue";
import {
  CheckOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import { Modal, message } from "ant-design-vue";
import { useModal } from "@/hooks"

export default {
  components: {
    CheckOutlined,
    EditOutlined,
    ExclamationCircleOutlined,
  },
  setup() {
    const formRef = ref("");
    const form = reactive({
      // portValue:'',
      inputValue: "",
    });

    const loading = ref(false); //表格的加载

    const visible = ref(false); //是否显示弹窗

    const title = ref(""); //分类名称
    const rules = {
      portValue: [
        { required: true, message: "请选择端口!", trigger: "change" },
      ],
      inputValue: [
        { required: true, message: "请输入搜索内容!", trigger: "blur" },
      ],
    };

    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 5,
    });

    //   端口列表
    const ports = reactive([
      {
        name: "用户端",
        id: 1,
      },
      {
        name: "护士端",
        id: 1,
      },
    ]);
    const delListId = ref([]); //删除数组ID集合

    // 查询
    const search = () => {
      formRef.value
        .validate()
        .then(() => {})
        .catch((error) => {
          console.log("error", error);
        });
    };
    const columns = [
      {
        title: "分类名称",
        dataIndex: "title",
        className: "table",
      },
      {
        title: "操作",
        dataIndex: "operation",
        className: "table",
        slots: {
          customRender: "operation",
        },
      },
    ];
    const dataSource = [
      {
        key: "1",
        title: "我的-用户须知",
      },
    ];

    for (let i = 0; i < 4; i++) {
      dataSource.push({
        key: i + 2,
        title: "登录-隐私政策",
      });
    }

    // 分页器
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ["10", "20", "30"],
      showTotal: (total, range) => {
        return "共" + total + "条";
      },
      total: 0,
      showQuickJumper: true,
      showSizeChanger: true,
    }));

    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      console.log(pagination, "当前分页");
      page.current = pagination.current;
      page.pageSize = pagination.pageSize;

      // 请求列表接口
    };
    const cancel = () => {
      visible.value = false;
      title.value = "";
    };
    // 新增
    const add = () => {
      visible.value = true;
    };
    const save = () => {
      if (!title.value) {
        message.error("请输入分类名称！");
      } else if (title.value.length >= 25) {
        message.error("输入内容超出25个字符限制！");
      } else {
        title.value = "";
        visible.value = false;

        // 请求接口
      }
    };
    // 删除
    const del = (key) => {
      const {closeModal} = useModal.confirm({
        title: () => "你确定删除当前项吗?",
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () =>
          createVNode(
            "div",
            {
              style: "color:#faad14;",
            },
            "删除当前数据后不可恢复，请谨慎考虑。"
          ),
        class: "test",
      });
    };

    // 全选反选
    const rowSelection = ref({
      checkStrictly: false,
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          "selectedRows: ",
          selectedRows
        );
        delListId.value = selectedRowKeys;
        console.log(delListId.value, "删除ID是");
      },
      onSelect: (record, selected, selectedRows) => {
        //console.log(record, selected, selectedRows,'选择多项');
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        //console.log(selected, selectedRows, changeRows,'全选操作');
        // 数组项
      },
    });
    // 删除多项
    const listDel = () => {
      const {closeModal} = useModal.confirm({
        title: "确定删除所选内容项吗?",
        icon: createVNode(ExclamationCircleOutlined),
        content: "删除后将不可恢复，请谨慎操作。",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
      });
    };
    return {
      ports,
      formRef,
      form,
      rules,
      visible,
      dataSource,
      columns,
      loading,
      pagination,
      title,
      handleTableChange,
      search,
      add,
      del,
      save,
      cancel,
      rowSelection,
      listDel,
    };
  },
};
</script>
<style scoped lang="less">
.act {
  color: #2a9d8f;
}
</style>
